@import './../../styles/variables.scss';

.header {
  height: 15vh;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .logo {
    cursor: pointer;
    font-size: 36px;
    color: white;
  }

  .nav {
    ul {
      display: flex;
      gap: 20px;

      .link {
        color: $white;
        cursor: pointer;
        font-family: 'Inter';
        transition: 0.15s ease-in;
      }

      .link:hover {
        color: rgb(182, 33, 33);
      }

      .link.active {
        color: rgb(182, 33, 33);
      }
    }
  }

  .menu {
    display: flex;
    gap: 20px;
    .link {
      color: $white;
      cursor: pointer;
      font-family: 'Inter';
      transition: 0.15s ease-in;
    }

    .link:hover {
      color: rgb(182, 33, 33);
    }

    .link.active {
      color: rgb(182, 33, 33);
    }
  }

  .wrapper {
    display: flex;
    gap: 0 20px;
    color: white;
    cursor: pointer;

    .user {
      color: $white;
      font-family: 'Inter';
      transition: 0.15s ease-in;
    }

    .logOut {
      color: $white;
      font-family: 'Inter';
      transition: 0.15s ease-in;
    }

    .logOut:hover {
      color: rgb(182, 33, 33);
    }

    .user:hover {
      color: rgb(182, 33, 33);
    }
  }

  .login {
    ul {
      display: flex;
      gap: 20px;
    }

    .link {
      color: $white;
      cursor: pointer;
      font-family: 'Inter';
      transition: 0.15s ease-in;
    }

    .link:hover {
      color: rgb(182, 33, 33);
    }
  }
}
